<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-06-27 15:19:42
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-06-30 15:17:34
 * @FilePath: /XMate-h5/src/views/minutes/components/speech/speechSegment.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex flex-col w-full min-h-[6vh] max-h-[80vh] bg-white shadow-lg mx-auto">
    <div
      class="flex items-center justify-center text-lg font-semibold pt-4 pb-4 relative"
    >
      <span>发言人片段({{ asrList.length }})</span>
    </div>
    <div class="pt-5 flex flex-col flex-auto overflow-y-auto bg-white">
      <div class="flex items-center gap-4 pl-5 text-base font-medium mb-3 bg-white">
        {{ speakerData?.name || "" }}

        <div
          v-if="minutesStore.isOwner"
          class="flex flex-row items-center text-[12px] text-[#8C8C8C]"
          @click="emits('handleEdit', speakerData)"
        >
          <van-icon name="edit" class="mr-1" size="16" />
          <span>标注</span>
        </div>
      </div>
      <div class="flex flex-col flex-auto overflow-y-auto px-5">
        <SpeechSegmentItem
          v-for="(item, idx) in asrList"
          :key="item.osi || idx"
          :item="item"
          divide-y
          :index="idx"
          :active="idx === activeIndex"
          @click="handleSegmentClick(item, idx)"
        />
      </div>
    </div>
    <div class="mt-4 px-4">
      <AudioPlayer
        :needShadow="false"
        ref="audioPlayerRef"
        :audioSrc="audioSrc"
        @timeupdate="onTimeUpdate"
        @onClickPlay="onClickPlayBtn"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineEmits } from "vue";
import { useMinutesStore } from "@/store/modules/minutes/minutes";
import AudioPlayer from "../audioPlayer/index.vue";
import { storeToRefs } from "pinia";
import { SpeechOverview, AsrObject } from "@/types/minutes/store.type";
import SpeechSegmentItem from "./SpeechSegmentItem.vue";

const props = defineProps<{ userId: string }>();

const minutesStore = useMinutesStore();
const { speechOverviewData, currentRecordDetailInfo } = storeToRefs(minutesStore);

const speakerData = computed<SpeechOverview | undefined>(() =>
  speechOverviewData.value.find((item) => item.uid === props.userId)
);

const emits = defineEmits<{
  (e: "handleEdit", speaker: SpeechOverview): void;
}>();

const asrList = computed<AsrObject[]>(() => {
  if (!speakerData.value?.asrList) return [];
  return speakerData.value.asrList.filter((item) => {
    // 优先用duration字段，否则用et-bt
    const duration =
      typeof item.duration === "number" ? item.duration : item.et - item.bt;
    return duration >= 1000 * 2;
  });
});

const audioSrc = computed(() => currentRecordDetailInfo.value?.recordingPath || "");

const seekTime = ref<number | undefined>(undefined);
const activeIndex = ref<number>(-1);

const audioPlayerRef = ref();

function onClickPlayBtn(isPlay: boolean) {
  if (!isPlay) return;
  if (activeIndex.value !== -1) return;
  handleSegmentClick(asrList.value[0], 0);
}

function handleSegmentClick(item: AsrObject, idx: number) {
  seekTime.value = item.bt;
  activeIndex.value = idx;
  if (audioPlayerRef.value) {
    audioPlayerRef.value?.seekTo(item.bt / 1000.0);
  }
}

function onTimeUpdate(currentMs: number) {
  // 自动暂停逻辑：如果有选中片段且播放进度超过该片段et，则暂停
  if (activeIndex.value !== -1 && asrList.value[activeIndex.value]) {
    const segment = asrList.value[activeIndex.value];
    if (currentMs >= segment.et) {
      // 直接调用播放器暴露的pause方法
      if (audioPlayerRef.value?.pause) {
        audioPlayerRef.value.pause();
      }
    }
  }
}
</script>
